<template>
  <div id="cpu" style="width: 270px;height: 200px;"></div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    methods: {
      aucDrawLine(val) {

        // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
        // 这里'auc'是自己取的名字，跟div标签属性的id后面的值是一一对应的
        let myChart = echarts.init(document.getElementById('cpu'));
        // 绘制图表
        myChart.setOption({
          series: [{
            type: 'liquidFill',
            radius: '80%',
            waveAnimation: true,
            data: [{
              value: val,
              direction: 'left',
              itemStyle: {
                normal: {
                  color: '#7DCEA0'
                }
              }
            },
            {
              value: 0.45,
              direction: 'right',
              itemStyle: {
                normal: {
                  color: '#52BE80 '
                }
              }
            },
            ],
            outline: {
              show: true,
              borderDistance: 5, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 0.9, // 边框的透明度   默认为 1
                borderWidth: 2, // 边框的宽度
                shadowBlur: 14, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: "#fff", // 边框的阴影颜色,
                borderColor: '#3AA66E' // 边框颜色
              }
            },
            itemStyle: {
              opacity: 0.9, // 波浪的透明度
              shadowBlur: 0 // 波浪的阴影范围
            },
            backgroundStyle: {
              color: '#fff' // 图表的背景颜色
            },
            label: { // 数据展示样式
              show: true,
              color: '#888',
              insideColor: '#fff',
              fontSize: 24,
              fontWeight: 400,
            },

          }]
        })
      },
    },
  }
</script>
